<template>
  <div class="login">
    <el-card class="content" v-loading="loading">
      <el-form
        label-width="20%"
        ref="form"
        :model="userForm"
        :rules="loginRules"
      >
        <el-form-item>
          <h3 class="title">后台管理系统</h3>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            style="width: 80%"
            v-model.trim="userForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            ref="password"
            :key="passwordType"
            v-model.trim="userForm.password"
            :type="passwordType"
            style="width: 80%"
            placeholder="密码"
            name="密码"
            prefix-icon="el-icon-lock"
          >
            <i
              slot="suffix"
              @click="showPwd"
              :class="
                passwordType === 'password'
                  ? 'el-icon-view'
                  : 'el-icon-s-opportunity'
              "
            ></i
          ></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item class="btn">
          <el-button type="primary" style="width: 80%" @click="handleLogin">
            登录
          </el-button>
        </el-form-item>
        <el-form-item class="infole"
          ><i>username : ash</i><i>password : 123456</i></el-form-item
        >
        <!-- 注册跳转链接 -->
        <el-form-item>
          <el-link
            @click="$router.push('/reg')"
            target="_blank"
            :underline="false"
            ><i class="el-icon-coordinate"></i> 去注册</el-link
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import { loginActionAPI } from '@/api/login'
export default {
  data() {
    return {
      // 用户信息
      userForm: {
        username: 'ash',
        password: '123456'
      },
      // 用户登录校验规则
      loginRules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10位的字母数字',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '用户名要求3-10个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '用户名要求6-15个字符',
            trigger: 'blur'
          }
        ]
      },
      // 密码框类型
      passwordType: 'password',
      loading: false
    }
  },
  methods: {
    // 密码框是否展示密码数据
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 登录
    handleLogin() {
      this.$refs.form.validate(async (value) => {
        if (!value) return
        try {
          this.loading = true
          await this.$store.dispatch('user/loginAction', this.userForm)
          this.$message.success('登陆成功')
          this.$router.replace(this.$route.query.redirectUrl || '/layout')
        } catch (error) {
          // 只能通过code判断是否登陆成功无法捕获error
          // if (error.message) return this.$message.error(error)
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/images/login.png') no-repeat 0 0/100vw 100vh;
  height: 100vh;
  .content {
    width: 650px;
    height: 380px;
    .title {
      color: #422618;
      font-size: 25px;
      margin-left: 25%;
      margin-bottom: 10px;
    }
    .btn {
      margin-bottom: 0;
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
  .infole {
    margin: 0;
    i {
      padding-right: 10px;
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.9); // 输入登录表单的背景色
    border-radius: 5px;
    color: #407ffe;
    .el-form-item__error {
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
